<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂流瓶</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="auth-area">
        <button id="loginBtn" class="auth-btn">登录</button>
        <div id="userInfo" class="user-info" style="display: none;">
            <span class="user-email"></span>
            <button id="logoutBtn">退出</button>
        </div>
    </div>
    <div class="container">
        <!-- 背景装饰 -->
        <div class="decorations">
            <div class="cloud cloud1"></div>
            <div class="cloud cloud2"></div>
            <div class="seagull seagull1"></div>
            <div class="seagull seagull2"></div>
        </div>

        <!-- 主要场景 -->
        <div class="scene">
            <!-- 中心瓶子 -->
            <div class="main-bottle">
                <div class="bottle-shine"></div>
                <div class="bottle-neck"></div>
                <div class="bottle-body">
                    <div class="bottle-paper"></div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <button id="throwBottle" class="action-btn throw-btn">
                    <span class="btn-icon">✉️</span>
                    扔一个漂流瓶
                </button>
                <button id="pickBottle" class="action-btn pick-btn">
                    <span class="btn-icon">🔍</span>
                    捡一个漂流瓶
                </button>
                <button id="privateEmail" class="action-btn email-btn">
                    <span class="btn-icon">📧</span>
                    私发邮件
                </button>
            </div>
        </div>

        <!-- 海洋 -->
        <div class="ocean">
            <div class="wave wave1"></div>
            <div class="wave wave2"></div>
            <!-- 添加漂浮的瓶子 -->
            <div class="floating-bottles">
                <div class="floating-bottle">
                    <div class="bottle-neck"></div>
                    <div class="bottle-body"></div>
                </div>
                <div class="floating-bottle">
                    <div class="bottle-neck"></div>
                    <div class="bottle-body"></div>
                </div>
                <div class="floating-bottle">
                    <div class="bottle-neck"></div>
                    <div class="bottle-body"></div>
                </div>
                <div class="floating-bottle">
                    <div class="bottle-neck"></div>
                    <div class="bottle-body"></div>
                </div>
                <div class="floating-bottle">
                    <div class="bottle-neck"></div>
                    <div class="bottle-body"></div>
                </div>
            </div>
            <div class="bubbles">
                <div class="bubble"></div>
                <div class="bubble"></div>
                <div class="bubble"></div>
            </div>
        </div>

        <!-- 扔漂流瓶的弹窗 -->
        <div id="throwModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>写下你的心事</h2>
                <textarea id="message" placeholder="写下你想说的话..."></textarea>
                <input type="email" id="email" placeholder="留下你的邮箱（选填）">
                
                <!-- 添加定时发送选项 -->
                <div class="schedule-option">
                    <label class="schedule-toggle">
                        <input type="checkbox" id="enableSchedule">
                        <span class="toggle-label">定时发送</span>
                    </label>
                    <div class="schedule-inputs" style="display: none;">
                        <input type="datetime-local" id="scheduleTime">
                        <input type="email" id="scheduleEmail" placeholder="接收邮箱">
                    </div>
                </div>
                
                <button id="submitBottle">扔出去</button>
            </div>
            <!-- 添加扔瓶子的动画容器 -->
            <div class="throw-animation">
                <div class="throw-bottle">
                    <div class="bottle-neck"></div>
                    <div class="bottle-body"></div>
                </div>
                <div class="splash"></div>
            </div>
        </div>

        <!-- 捡到漂流瓶的弹窗 -->
        <div id="pickModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>捡到一个漂流瓶</h2>
                <div id="bottleContent"></div>
                <button id="replyBottle" class="action-btn" style="display: none;">
                    <span class="btn-icon">💌</span>
                    回复
                </button>
                <div class="reply-form" style="display: none;">
                    <input type="email" id="replyEmail" placeholder="你的邮箱（选填）">
                    <textarea id="replyMessage" placeholder="写下你的回复..."></textarea>
                    <button id="sendReply">发送回复</button>
                </div>
            </div>
        </div>

        <!-- 修改私发邮件的弹窗 -->
        <div id="emailModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>私发邮件</h2>
                <div class="email-form">
                    <input type="email" id="emailTo" placeholder="收件人邮箱" required>
                    <textarea id="emailContent" placeholder="写下你想说的话..." required></textarea>
                    
                    <div class="email-schedule-option">
                        <label class="schedule-toggle">
                            <input type="checkbox" id="emailScheduleEnabled">
                            <span class="toggle-label">定时发送</span>
                        </label>
                        <div id="emailScheduleInputs" class="email-schedule-inputs">
                            <input type="datetime-local" id="emailScheduleTime">
                            <div class="schedule-hint">选择发送时间（至少1分钟后）</div>
                        </div>
                    </div>
                    
                    <button id="sendEmail" class="send-btn">
                        <span class="btn-icon">📧</span>
                        <span class="btn-text">发送</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 在container的最后添加消息框组件 -->
        <div class="message-box" id="messageBox">
            <div class="message-content">
                <span class="message-text"></span>
            </div>
        </div>
    </div>
    <div id="inboxBtn" class="inbox-btn" style="display: none;">
        <span class="btn-icon">📬</span>
        <span class="unread-count"></span>
    </div>
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>登录</h2>
            <div class="login-form">
                <div class="input-group">
                    <input type="email" id="loginEmail" placeholder="请输入邮箱">
                </div>
                <div class="verify-group">
                    <input type="text" id="verifyCode" placeholder="请输入验证码" maxlength="6">
                    <button id="sendCodeBtn">发送验证码</button>
                </div>
                <button id="loginSubmit" class="submit-btn">登录</button>
            </div>
        </div>
    </div>
    <div id="inboxModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>我的收件箱</h2>
            <div class="inbox-list"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html> 